<template>
    <div class="container">
        <div class="service-wrapper">
            <div class="score-wrapper">
                <span class="score">{{seller.score}}</span>
                <span class="text">综合评分</span>
                <span class="desc">高于周边商家{{seller.rankRate}}</span>
            </div>
            <div class="srv-wrapper">
                <div class="rank-wrapper">
                    <span class="title">服务态度</span>
                    <RatingBar class="rating-bar" :size="24" :score="seller.serviceScore"></RatingBar>
                    <span class="score">{{seller.serviceScore}}</span>
                </div>
                <div class="rank-wrapper">
                    <span class="title">服务态度</span>
                    <RatingBar  class="rating-bar" :size="24" :score="seller.serviceScore"></RatingBar>
                    <span class="score">{{seller.serviceScore}}</span>
                </div>
                <div class="diliver-wrapper">
                    <span class="title">送达时间</span>
                    <span class="desc">{{seller.deliveryTime}}分钟</span>
                </div>
            </div>
        </div>
        <SelectFilter :titles="{all:'全部',positive:'满意',negative:'不满意'}"></SelectFilter>
        <div class="comments-wrapper">
            <div v-show="showOnlyContent" class="conmments-body" v-for="item in ratings">
                <div class="comments-item">
                    <span class="item-time">{{item.rateTime}}</span>
                    <div class="text-wrapper">
                        <span class="text"><span class="ico" :class="{'ico-thumb_up':item.rateType ===0,'ico-thumb_down':item.rateType!==0}"></span>{{item.text}}</span>
                    </div>
                    <div class="avatar-wrapper">
                        <span class="name">{{item.username}}</span>
                        <img class="avatar" width="12" height="12" :src="item.avatar"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import RatingBar from './RatingBar/RatingBar'
import SelectFilter from './SelectFilter/SelectFilter'
export default {
  name: 'Comment',
  props: {
    seller: {
      type: Object,
      default: {}
    },
    ratings: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      ratings: {},
      showOnlyContent: true
    }
  },
  created () {
    this.$http.get('/api/ratings').then((resp) => {
      resp = resp.body
      if (resp.code === 0) {
        this.ratings = resp.data
      }
    })
  },
  components: {
    RatingBar,
    SelectFilter
  },
  events: {
    'showOnlyContent.change' (show) {
      this.showOnlyContent = show
      alert('')
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.container
  .service-wrapper
    display :flex
    padding:18px 24px 18px 0
    border-bottom:1px rgba(7,17,27,0.1) solid
    .score-wrapper
      flex: 0 0 127px
      text-align :center
      border-right :1px rgba(7,17,27,0.1) solid
      .score
        display :block
        font-size :24px
        color:rgb(255,153,0)
         line-height :28px
      .text
        display :block
        font-size :12px
        color:rgb(7,17,27)
        line-height :12px
        margin :6px 0 8px 0
      .desc
        display :block
        font-size :10px
        color:rgb(7,17,27)
        line-height :10px
    .srv-wrapper
      flex:1
      padding-left :24px
      .rank-wrapper
        .title
          display :inline-block
          font-size :12px
          color:rgb(7,17,27)
          line-height :18px
        .rating-bar
          display :inline-block
          margin-left :12px
        .score
          margin-left :12px
          font-size :12px
          color:rgb(255,153,159)
          line-height :18px
        &:nth-child(2)
          margin:8px 0 8px 0
      .diliver-wrapper
        display :block
        .title
          font-size :12px
          color:rgb(7,17,27)
          line-height :18px
        .desc
          font-size :12px
          color :rgb(147,153,159)
          line-height :18px
  .comments-wrapper
    .conmments-body
      padding-top :16px
      padding-left :18px
      padding-right :18px
      .comments-item
        position :relative
        border-bottom :1px solid rgba(7,17,27,0.1)
        .item-time
          display :inline-block
          font-size :10px
          line-height :12px
          color:rgb(147,153,159)
        .text-wrapper
          font-size :0dp
          margin :6px 0 16px 0
          .ico
            display :inline-block
            font-size :12px
            line-height :24px
            margin-right :2px
            color :rgb(147,153,159)
            &.ico-thumb_up
              color:rgb(0,160,220)
          .text
            display :inline-block
            width:100%
            font-size :12px
            line-height :16px
            color:rgb(7,17,27)
        .avatar-wrapper
          position :absolute
          right :0
          top :0
          .avatar
            border-radius :50%
            margin-left :6px
      &:last-child
        border-bottom :0px red solid
</style>
